<template lang="pug">
  div
    el-card.tableFilter(:body-style="{padding: '0 10px'}")
      div(slot="header" class="boxHeader") 图像资源库信息查询
      form-box(
        style="padding: 0 10px 10px 10px"
        :items="filterItems"
        :isFilter="true"
        :searchHandle="searchHandle"
      )
    el-card.tableInnerWrapper(:body-style="{padding: '0 10px'}")
      div(slot="header" class="boxHeader")
        h2 图像资源库信息列表
      .photoBox(style="padding: 20px 0")
        el-row(:gutter="24")
          el-col(:sm="8" :md="6" :lg="4" :xl="3" v-for="item in list" :key="item.capId")
            el-card(:bodyStyle="{padding: 0}")
              a-image(:url="item.camaPhotoUrl")
              .info
                p 抓拍时间：
                  small.c_secondary {{item.capTime}}
                p 抓拍机构：
                  small.c_secondary {{item.capLoc}}
                p 姓名：
                  small.c_error {{item.psnName}}
      p.tr
        el-pagination(
          background
          layout="prev, pager, next"
          :total="pagination.total"
          :page-size="pagination.pageSize"
          hide-on-single-page
          @current-change="page => getData(page)"
        )
</template>
<script>
import { FormBox, AImage } from '@/components'
import { imgReqList } from '@/api/libary'

export default {
  components: {
    FormBox,
    AImage
  },
  computed: {
    filterItems () {
      return [
        {
          key: 'keyword',
          label: '关键信息'
        },
        {
          key: 'medinsId',
          label: '抓拍位置',
          type: 'orgselect'
        },
        {
          key: 'devType',
          label: '设备类型',
          type: 'selectdict',
          dictKey: 'videoTruncateTye'
        },
        {
          key: 'Time',
          label: '抓拍时间',
          type: 'datetimerange'
        }
      ]
    }
  },
  data () {
    return {
      searchValue: null,
      pagination: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      list: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    searchHandle (vals) {
      console.log(vals)
      this.searchValue = vals
    },
    // 获取列表
    getData (pageNum = this.pagination.page) {
      imgReqList({ pageNum, pageSize: this.pagination.pageSize }, { ...this.searchValue }).then(res => {
        console.log(res)
        this.list = res.records || []
        this.pagination = Object.assign(this.pagination, {
          total: res.total,
          page: res.pageNum
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.photoBox{
  margin-bottom: 24px;

  .info{
    padding: 10px;

    p {
      font-size: 12px;
      line-height: 1.8;
    }
  }
}
</style>
